<template>
  <div class="algorithm-page">
    <h1>回溯与分支限界算法</h1>
    
    <div class="intro-section">
      <h2>算法介绍</h2>
      <p>回溯算法是一种通过探索所有可能的解决方案来找到满足问题约束的解决方案的方法。分支限界算法是一种用于解决组合优化问题的搜索算法。</p>
      
      <h3>回溯算法特点：</h3>
      <ul>
        <li>深度优先搜索：按深度优先策略搜索解空间</li>
        <li>剪枝：通过约束条件减少搜索空间</li>
        <li>回溯：当探索到某一步时发现不满足条件，则回退到上一步</li>
      </ul>

      <h3>分支限界算法特点：</h3>
      <ul>
        <li>广度优先搜索：按广度优先策略搜索解空间</li>
        <li>最优性：通常用于寻找最优解</li>
        <li>限界函数：使用限界函数剪枝，减少搜索空间</li>
      </ul>
    </div>

    <div class="cases-section">
      <h2>经典案例</h2>
      <div class="case-list">
        <div v-for="item in cases" :key="item.id" class="case-card" @click="viewCaseDetail(item.id)">
          <h3>{{ item.name }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Backtracking',
  data() {
    return {
      cases: []
    }
  },
  created() {
    this.fetchCases()
  },
  methods: {
    async fetchCases() {
      try {
        const response = await axios.get('/api/algorithm-cases', {
          params: { type: 'backtracking' }
        })
        if (response.data.code === 0) {
          this.cases = response.data.data
        }
      } catch (error) {
        console.error('获取案例列表失败:', error)
      }
    },
    viewCaseDetail(id) {
      this.$router.push(`/case-detail/${id}`)
    }
  }
}
</script>

<style scoped>
.algorithm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.intro-section {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.intro-section h2, .intro-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.intro-section h3 {
  margin-top: 20px;
}

.intro-section ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.intro-section li {
  margin: 10px 0;
}

.cases-section {
  margin-top: 30px;
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.case-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.case-card h3 {
  color: #34495e;
  margin-bottom: 10px;
}

.case-card p {
  color: #666;
  font-size: 14px;
}
</style> 